@import "./variables.scss";

@mixin flex-align {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin el-form-fz-fzfff {
  color: $fzcolor;
  font-size: 0.8rem;
}

@mixin el-form-label {
  .el-form-item__label {
    position: relative;
  }

  .el-form-item__label::after {
    content: " :";
  }
}

@mixin el-form-disabled-input($fz) {
  background: none;
  border-width: 0;
  text-align: left;
  padding: 0;
  box-shadow: none;
  color: $fz;
  -webkit-text-fill-color: $fz;

  .el-range-separator,
  .el-range__icon {
    color: $fz;
  }
}

@mixin el-form-disabled-css {
  @include el-form-disabled-input($fzmain);
}

@mixin el-form-disabled-css-fzfff {
  @include el-form-disabled-input($fzcolor);

}

@mixin el-form-disabled-fzfff {
  .el-range-editor.is-disabled {
    @include el-form-disabled-css-fzfff;
  }

  .is-disabled {

    *,
    .el-radio__inner::after {
      cursor: default !important;
    }

    .el-input__inner,
    .el-textarea__inner,
    .el-range-input {
      @include el-form-disabled-css-fzfff;
    }

    .el-range-input {
      text-align: center;
    }

    .el-input-number__decrease,
    .el-input-number__increase,
    .el-input__suffix {
      display: none;
    }
  }
}

@mixin el-none {
  background: none;
  box-shadow: none;
}

@mixin el-form-disabled {
  .el-range-editor.is-disabled {
    @include el-form-disabled-css;
  }

  .el-textarea.is-disabled textarea {
    line-height: 2.2;
  }

  .el-input-group--append.is-disabled {

    .el-input__wrapper {
      box-shadow: 0 0 0 1px #eee inset;
    }

    .el-input__inner {
      border-width: 1px;
      border-color: #eee;
    }
  }

  //.el-select__wrapper.is-disabled,
  .is-disabled {
    @include el-none;

    .el-input__wrapper {
      @include el-none;
    }

    *,
    .el-radio__inner::after {
      cursor: default !important;
    }

    .el-input__inner,
    .el-textarea__inner,
    .el-range-input {
      @include el-form-disabled-css;
    }

    .el-range-input {
      text-align: center;
    }

    .el-select__suffix,
    .el-input-number__decrease,
    .el-input-number__increase,
    .el-input__suffix {
      display: none;
    }
  }

  //数值不隐藏
  // .el-input-number.is-disabled {
  //   .el-input__inner {
  //     border-width: 1px;
  //     border-color: #eee;
  //   }

  //   .el-input-number__decrease,
  //   .el-input-number__increase {
  //     display: block;
  //   }
  // }
}

@mixin el-select-dropdown {
  background: $mainbg;
  border-color: $bdcolor;

  .el-scrollbar__wrap {
    max-height: 10rem;
  }

  span {
    color: $fzcolor;
    font-size: 0.8rem;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover,
  .el-cascader__search-input {
    background: $mainbg1;
    border-color: $mainbg1;
  }

  .popper__arrow {
    border-bottom-color: $bdcolor !important;
  }

  .popper__arrow::after {
    border-bottom-color: $mainbg !important;
  }

  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background: $mainbg100;
  }

  .el-icon-arrow-right:before {
    color: $fzcolor;
  }

}

@mixin patm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin male {
  background: #018ffa;
}

@mixin female {
  background: #ff5983;
}

@mixin colort {
  font-family: Impact;
  background: linear-gradient(to bottom, #fff, #6fbdd3, #5195a8);
  -webkit-background-clip: text;
  color: transparent;
}

@mixin colortitle {
  font-family: Impact;
  background: linear-gradient(to bottom, #fff, #f1f1f1, #70cbe4);
  -webkit-background-clip: text;
  color: transparent;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  @include wh;
}

@mixin absolute {
  @include wh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

@mixin wautos {
  width: 100%;
  height: auto;
  overflow: hidden;
}

@mixin wauto {
  width: 100%;
  height: auto;
}

@mixin pd8 {
  padding: 0.8rem 0;
  box-sizing: border-box;
}

@mixin wh {
  width: 100%;
  height: 100%;
}

@mixin m($m) {
  margin: $m;
}

@mixin mt($top) {
  margin-top: $top;
}

@mixin mb($bottom) {
  margin-bottom: $bottom;
}

@mixin ml($left) {
  margin-left: $left;
}

@mixin mr($right) {
  margin-right: $right;
}

//倒三角
//$position:位置：top:向下，left：向右
//$w:大小
//$borderColor：线条颜色
//$bg：背景
@mixin triangle($position, $w,
  $borderColor,
  $bg) {
  .popper__arrow {
    position: absolute;
    bottom: 0;
    left: 42%;
  }

  .popper__arrow::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: #{$w} solid transparent;
    border-#{$position}: #{$w} solid #{$borderColor};
  }

  .popper__arrow::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 0px;
    height: 0px;
    border: #{$w} solid transparent;
    border-#{$position}: #{$w} solid #{$bg};
  }
}

//清除浮动
@mixin clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}